{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>【公司办公用品区域购买分析和销售预测系统】注册</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.css' %}">
    <style>
        #avatar_img {
            margin-left: 20px;
        }

        #avatar {
            display: none;
        }

        .error {
            color: red;
        }

        body {
            background-image: url('{% static 'img/背景图.jpg' %}');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-6 col-lg-offset-3 modal-content" style="margin-top: 100px; padding: 30px 30px">
            <h3 class="text-center">注册界面</h3>
            <form id="form" action="" method="post">
                {% csrf_token %}

                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.auto_id }}">{{ field.label }}</label>
                        {{ field }} <span class="error pull-right"></span>
                    </div>
                {% endfor %}

                {# 上传头像 #}
                <div class="form-group">
                    <label for="avatar">
                        头像
                        <img id="avatar_img" src="/media/avatar/default.png" width="70" height="70" alt="默认头像"/>
                    </label>
                    <input type="file" id="avatar"/>
                </div>

                <input type="button" class="btn btn-success reg_btn" value="注册"/><span id="error"></span>
                <a href="{% url 'login' %}" class="btn btn-default pull-right">返回登录界面</a>
            </form>
        </div>
    </div>
</div>

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.js' %}"></script>
<script>
    // 头像预览
    $("#avatar").change(function () {
        // 获取用户选中的文件对象
        const file_obj = $(this)[0].files[0];
        // 获取文件对象的路径
        const reader = new FileReader();
        reader.readAsDataURL(file_obj);
        // 修改img的src属性 ，src=文件对象的路径
        reader.onload = function () {
            $("#avatar_img").attr("src", reader.result)
        };
    });

    // 基于Ajax提交数据
    $(".reg_btn").click(function () {
        // console.log($("#form").serializeArray());
        const form_data = new FormData();
        const request_data = $("#form").serializeArray();
        $.each(request_data, function (index, data) {
            form_data.append(data.name, data.value)
        });

        form_data.append("avatar", $("#avatar")[0].files[0]);

        $.ajax({
            url: "",
            type: "post",
            contentType: false,
            processData: false,
            data: form_data,
            success: function (data) {
                console.log(data);
                if (data.user) {
                    //console.log("success");
                    // 注册成功
                    location.href = "/login/"
                } else { // 注册失败
                    //console.log(dataset.msg)

                    // 清空错误信息，不然上一次的错误这次还是会显示
                    $("span.error").html("");
                    $(".form-group").removeClass("has-error");

                    // 展此次提交的错误信息!
                    $.each(data.msg, function (field, error_list) {
                        //console.log(field, error_list);
                        if (field === "__all__") {
                            $("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
                        }
                        const temp = "#id_" + field;
                        $(temp).next().html(error_list[0]);
                        $(temp).parent().addClass("has-error");
                    })
                }
            }
        })
    })
</script>
</body>
</html>